<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ShoppingCar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{css/style.css}" type="text/css" rel="stylesheet" media="all">
    <script th:src="@{js/jquery-3.4.1.js}"></script>
    <link th:href='@{fonts/Aladin-Fonts.css}' rel='stylesheet' type='text/css'/>
    <link th:href="@{css/animate.css}" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" th:href="@{css/element.css}">
    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/element.js}"></script>
    <script th:src="@{js/axios.js}"></script>
    <script th:src="@{js/dataParse.js}"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
            padding-left: 0;
        }

        .el-table th > .cell {
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            vertical-align: middle;
            padding-left: 1px;
            padding-right: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
<!--banner-->
<div class="banner about-bnr">
    <div class="bnr-img">
        <img class="wow fadeInLeftBig animated" data-wow-delay=".5s" src="images/a.png" alt=""/>
    </div>
    <div th:replace="top-list.html"></div>
    <div class="banner-text">
        <h1 class="wow fadeInDown animated" data-wow-delay=".5s"><a th:href="@{index}">POI - Coffee </a></h1>
        <h2 class="wow fadeInUp animated" data-wow-delay=".5s"><a th:href="@{index}">主页</a> / 购物车</h2>
    </div>
    <div class="clearfix"></div>
</div>
<!--//banner-->
<!-- gallery -->
<div id="app" style="margin-bottom: 100px">
    <div class="container" style="margin-top: 20px; position: relative;">
        <h4 class="title">SHOPPING-CAR</h4>
        <h3 class="title1">START <span>YOUR</span>COFFEE JOURNEY</h3>
        <car></car>
    </div>
</div>
<template id="car">
    <div style="margin-top: 20px; position: relative;">
        <el-table
                :data="tableData"
                style="width: 100%"
                show-summary
                :summary-method="getSummaries"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="商品信息"
                    prop="commodity.yname">
            </el-table-column>
            <el-table-column label="单价">
                <template slot-scope="scope">
                    {{scope.row.commodity.yprice | showPrice}}
                </template>
            </el-table-column>
            <el-table-column label="数量">
                <template slot-scope="scope">
                    <el-input-number size="mini" @change="handleChange($event,scope.row)"
                                     v-model="scope.row.cnum"
                                     :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="金额" v-if="tableData.length > 0">
                <template slot-scope="scope">
                    {{scope.row.commodity.yprice * scope.row.cnum | showPrice}}
                </template>
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot-scope="scope" slot="header">
                    <el-button plain
                               size="mini"
                               :disabled="multipleSelection.length === 0"
                               @click="settlement()"
                    >结算
                    </el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="height: 50px; position: relative;">
            <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="position: absolute; left:39%;">
            </el-pagination>
        </div>
    </div>
</template>
<div th:replace="fotter-all.html"></div>
<script th:src="@{js/shoppingCar.js}"></script>
</body>
</html>
